<template>
  <div class="addCamera">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>新增</slot>
    </el-button>
    <el-dialog class="d1" :title="title" :visible.sync="visible" append-to-body :close-on-click-modal="false" width="500px"
      @close="onClose">
      <el-form :model="form" ref="form" v-loading="loading" class="form rules" :rules="rules" label-width="120px" size="mini">
        <el-form-item label="设备名称：" prop="deviceName">
          <el-input v-model.trim="form.deviceName" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="设备类型：" prop="deviceType">
          <selector v-model="form.deviceType" type="otherDeviceType" size="small" placeholder="请选择"></selector>
        </el-form-item>
        <el-form-item label="所属点位：" prop="devicePoint">
          <selector v-model="form.pointId" type="devicePoint" size="small" placeholder="请选择"></selector>
        </el-form-item>
        <el-form-item label="所属供应商：" prop="deviceSupply">
          <selector v-model="form.supplierId" type="deviceSupply" size="small" placeholder="请选择"></selector>
        </el-form-item>
        <el-form-item label="设备编号：" prop="number">
          <el-input v-model.trim="form.number" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="通信设备IMEI" prop="imei">
          <el-input v-model.trim="form.imei" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="设备描述：" prop="description">
          <el-input v-model.trim="form.description" size="small" placeholder="请输入" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="form.state">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="align-r">
          <el-button size="small" @click="visible=false">取 消</el-button>
          <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import selector from "../../../components/selector";
  import { addDevice, updateDevice } from '@/api/page/device.js';
  import { checkIMEI } from "@/api/slope/sensor";

  export default {
    components: {
      selector
    },
    props: {
      showBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        changeImeiValue: null, // 是修改状态时修改imei之前的值
        title: "",
        defaultForm: {},
        form: {},
        rules: {
          deviceName: {
            required: true,
            message: "请输入设备名称"
          },
          deviceType: {
            required: true,
            message: "请选择设备类型"
          },
          number: {
            required: true,
            message: "请输入设备编号"
          },
          imei: [{
            required: true,
            message: "IMEI号不能为空"
          },{
            validator: (rule, value, callback) => {
              if (this.changeImeiValue != value) {
                checkIMEI(value).then(res => {
                  if (res.data.length > 0) {
                    callback('IMEI号重复了');
                  } else {
                    callback()
                  }
                })
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }]
		},
      };
    },
    methods: {
      onClose() {
        this.form = {};
      },
      async handleClick({
        info,
        title,
        submit
      }) {
        if (info != null) {
          this.form = {
            deviceId: info.seq,
            deviceName: info.name,
            deviceType: info.deviceType,
            pointId: info.pointId,
            supplierId: info.supplyId,
            number: info.number,
            imei: info.imei,
            description: info.description,
            state: info.deviceState
          };
          this.changeImeiValue = info.imei;
        } else {
          this.form = {
            state: 1
          };
        }
        this.title = title || "";
        this.submit = submit || (() => {});
        this.visible = true;
        await this.$nextTick();
        this.$refs["form"].clearValidate();
      },
      async handleSubmit(data) {
		var self = this;
        self.$refs["form"].validate(async valid => {
          if (valid) {
            self.loading = true;
            if (self.form.deviceId != null) {
              updateDevice(this.form)
                .then(res => {
                  if (res.code === 200) {
                    self.visible = false;
                    self.$emit("refresh");
                    self.msgSuccess("修改成功");
                  } else {
                    self.msgError(res.msg);
                  }
                })
                .finally(res => (
                  self.loading = false
                ));
            } else {
              addDevice(this.form)
                .then(res => {
                  if (res) {
                    self.visible = false;
                    self.$emit("refresh");
                    self.msgSuccess("新增成功");
                  } else {
                    self.msgError(res.msg);
                  }
                })
                .finally(res => (self.loading = false));
            }
          } else {
            return false;
          }
        });
      }
    }
  };
</script>
